<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Link on Images</title>

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/json.js"></script>

<style>

</style>

<script type="text/javascript">

$(document).ready(function() {
    
    var friends = {};
    
    var image = $('#link #pic');
    
    $('#link .setlink').toggle(
        function() {
            image.css({cursor: 'crosshair'});
            friends['Thorsten Eckel'] = "234324535";
            return false;
        }, function() {
            $('#link #pic').css({cursor: 'default'});
            return false;
    });
    
    image.click(function(e) {
    
        if(image.css('cursor') == 'crosshair' && $("#link #test").css('display') == 'none') {
        
            $("#link #test").css({
                "display": "block",
    			"position": "absolute",
    			"top":  e.pageY + "px",
    			"left":  e.pageX  + "px",
                "z-index": 0
    		});
        }
    });
    
//    $('#PRICEBRACETSBOX').css({
//     position: "absolute",
//     top: $("div#PRICEBRACETS").position()['top']+25,
//     left: $("div#PRICEBRACETS").position()['left']+3,
//     width: $("div#PRICEBRACETS").width(),
//     background: "red"
//   })
    

});
</script>

</head>

<body>

   <div id="link">
   
        <div id="test" style="display: none">
            <div><input type="text"></div>
        </div>
   
        <a class="setlink" href="#">Verlinken</a>
        <img id="pic" src="test.jpg">
    </div>
</body>

</html>
